<template>
<!-- 审批详情页 -->
   <div>
       <el-row :gutter="20" style=" padding-left:30px; padding-top:20px;">
            <el-col :span="17">
                <div class="grid-content bg-purple">
                  <el-button type="text" @click="back">返回上一页</el-button>
                    <div style="padding-left:30px; padding-top:50px;">
                        <el-avatar :size="110" src="https://cdn7.axureshop.com/demo2023/2236859/images/%E5%AE%A1%E6%89%B9%E8%AF%A6%E6%83%85_%E5%8F%AF%E4%BB%A5%E6%93%8D%E4%BD%9C/u6203.png"></el-avatar>
                    </div>
                    <div class="kuai1">
                        <span style="font-size:30px">{{voteInfo.nickName}}的用车申请
                            &nbsp;
                            <template>
                            <el-tag size="small" v-if="voteInfo.carState==0" effect="dark">审批中</el-tag>
                            <el-tag size="small" type="success" v-if="voteInfo.carState==1" effect="dark">已同意</el-tag>
                            <el-tag size="small" type="info" v-if="voteInfo.carState==3" effect="dark">已撤销</el-tag>
                            <el-tag size="small"  type="danger" v-if="voteInfo.carState==2" effect="dark">已拒绝</el-tag>
                            </template>
                        </span>
                        <br/><br/>
                        <span>提交于{{ voteInfo.createTime }}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="color:#909399">审批编号 {{ voteInfo.id }}</span>
                        <el-row style="position: relative;left:450px;top:-70px;">
                            <el-button v-if="voteInfo.carState==0" icon="el-icon-check" size="small" type="primary" plain @click="consentClick(voteInfo.id)">同意</el-button>
                            <el-button v-if="voteInfo.carState==0" icon="el-icon-close" size="small" type="danger" plain @click="rejectClick(voteInfo.id)">拒绝</el-button>
                        </el-row>
                        
                        <el-dropdown v-if="voteInfo.carState==0" style="position: relative;left:620px;top:-121px;">
                            <el-button icon="el-icon-more" size="small"></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>转签</el-dropdown-item>
                                <el-dropdown-item>加签</el-dropdown-item>
                                <el-dropdown-item>再次提交</el-dropdown-item>
                                <el-dropdown-item>撤回</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="kuai2">
                        <div class="kuang"></div>
                        <span style=" padding-left:40px;font-size:14px" >审批详情</span>
                        <div class="xian"></div>
                        <div class="neiqian1">
                            员工信息
                            <br/><br/>
                            <span style="color:#909399">申请人:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.nickName }}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">工作邮箱:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.productNo }}@qq.com
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">手机:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.productNo }}
                            <br/><br/>
                            <span style="color:#909399">工号:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.carUserId }}
                        </div>
                        <br/><br/><br/>
                        <div class="neiqian1">
                            用车信息
                            <br/><br/>
                            <span style="color:#909399">申请车辆:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.carNumber }}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">车辆类型:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.carName }}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">内部乘车人:</span>&nbsp;&nbsp;&nbsp;333
                            <br/><br/>
                            <span style="color:#909399">始发地:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.carOforigin }}
                              &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">目的地:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.carDestination }}
                            <br/><br/>
                            <span style="color:#909399">出车时间:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.carStartTime }}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">回车时间:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.carEndTime }}
                            <br/><br/>
                            <span style="color:#909399">用车事由:</span>&nbsp;&nbsp;&nbsp;{{ voteInfo.carCause }}
                        </div>
                    </div>
                    
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <span style=" position: relative;top:20px;left:20px">审批流程</span>
                    <el-timeline  style=" position: relative;top:50px;left:-10px">
                    <el-timeline-item color="#409EFF">
                        提交 &nbsp;&nbsp;
                        <span style="color:#909399">{{voteInfo.sponsorTime}}</span>
                        <br/>
                        <img  src="https://cdn7.axureshop.com/demo2023/2236859/images/%E8%AF%B7%E5%81%87/u2266.svg" class="avatar" @click="headPage=true">
                        <br/>
                        {{ voteInfo.nickName }}
                        </el-timeline-item>
                     <el-timeline-item color="#67C23A" v-for="(item,index) in getApprover" :key="index">
                        审批人 &nbsp;&nbsp;
                        <el-tag  size="mini" v-if="item.carState==0">待审核</el-tag>
                         <el-tag  size="mini" v-if="item.carState==1" type="success">已同意</el-tag>
                        <el-tag  size="mini" v-if="item.carState==2" type="danger">已拒绝</el-tag>
                        <el-tag  size="mini" v-if="item.carState==3" type="info">已撤销</el-tag> 
                        <br/><br/>
                         <img  :src="item.icon" class="avatar" @click="headPage=true">
                         <br/>
                       <span v-html="item.nickName"></span>
                     </el-timeline-item>
                     <el-timeline-item color="#E6A23C">抄送人
                         <br/><br/>
                        <img  :src="getCarbon.icon" class="avatar" @click="headPage=true">
                         <br/>
                        {{ getCarbon.nickName }}
                     </el-timeline-item>
                </el-timeline>
                </div>
            </el-col>
           
       </el-row>
   </div>
</template>

<script>
import axios from 'axios'
import { parseTime } from '@/utils/ruoyi';
export default {
    data(){
        return{
            
           voteInfo:{
            carbon:''

           },
           getCarbon:{

           },
           getApprover:[]
        }

    },
    created(){
      this.findById();
    },
    methods: {
      back(){
        this.$router.go(-1)
      },
        //回显审批列表
        findById(){
            axios
            .get("caruse/findTCarUseCenterById?id=" + this.$route.query.id)
            .then((res) => {
            // console.log(res)
            this.voteInfo = res.data.data;
            this.voteInfo.carEndTime = parseTime(this.voteInfo.carEndTime,'{y}-{m}-{d} {h}:{i}:{s}')
            this.voteInfo.carStartTime = parseTime(this.voteInfo.carStartTime,'{y}-{m}-{d} {h}:{i}:{s}')
            this.voteInfo.createTime= parseTime(this.voteInfo.createTime,'{y}-{m}-{d} {h}:{i}:{s}')
            // 抄送人获取
              axios
              .get("demo/findUserAndAuditById3?id=" + this.voteInfo.carbon+"&carUserId="+this.voteInfo.carUserId)
              .then((res) => {
              this.getCarbon = res.data;
              // console.log(res)
              });
              //审批人获取
              var ids=this.voteInfo.approver;
              ids=ids.replace(/\,/g,'');
              for(var i=0;i<ids.length;i++){
                axios
                .get("demo/findUserAndAuditById4?id=" + ids[i]+"&carUserId="+this.voteInfo.carUserId)
                .then((res) => {
                this.getApprover.push(res.data);
                console.log(this.getApprover)
                });
              }
            });
        },
        //拒绝
        rejectClick(id){
            this.from={}
            this.from.carState = 2
            this.from.id=id
            axios.post("/caruse/updateCarUseState",this.from).then((res)=>{
                console.log(res)
                if(res.data.code === 200){
                    this.$message.success(this.res.data.data)
                }
            })
            this.$router.go(0)
        },
        //同意
        consentClick(id){
            this.from={}
            this.from.carState = 1
            this.from.id=id
            axios.post("/caruse/updateCarUseState",this.from).then((res)=>{
                console.log(res)
                if(res.data.code === 200){
                    this.$message.success(res.data.data)
                }
            })
            this.$router.go(0)
        },
    }
}
</script>

<style scoped>
  .neiqian1{
    width: 800px;
    height: 100px;
    /* border: 1px red solid; */
    position: relative;
    top:30px;
    left:35px;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
 .kuai1{
    width: 700px;
    height: 100px;
    /* border: 1px red solid; */
    position: relative;
    top:-100px;
    left: 190px;
    
 }
 .kuai2{
    width: 880px;
    height: 400px;
    /* border: 1px red solid; */
    position: relative;
    top:-80px;
    left: 10px;
    
 }
 .el-row {
    margin-bottom: 20px;
   
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: white;
    height: 700px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .kuang{
        width: 3px;
        height: 20px;
        background-color: #409EFF;
        margin-left: 30px;
        position: relative;
        top: 20px;
    }
    .xian{
        width: 855px;
        height: 2px;
        background-color: #EBEEF5;
        margin-left:30px;
        margin-top: 10px;
       
    }
</style>